終於到最後一篇了, 一路持續寫過來, 這三十天中間有的時候下班很累, 心情浮躁就草草亂寫, 也有想放棄的念頭, 所幸最後我撐過來了.

這三十天中我盡力介紹Typescript 了不少語法示範, 中間穿插講解一些程式設計守則, 和一些Typescript 進階的應用範例, 試圖表明Typescript 的強大, 內容說明解釋要是有寫得不夠清楚的地方, 多多包涵.

VSCode Extension 常用的擴充套件

VSCode 除了提供編輯文字的功能, 也提供了擴充功能(Extension), 下面是幾個常用的擴充套件, 按下 CTRL + SHIFT + X 打開擴充功能, 或是點取VSCode 最左邊的第五個Icon 圖示, 輸入欲安裝套件的名稱.

ECMAScript 是甚麼

JavaScript 是1995 年誕生的, 而JavaScript 的標準是1999 制定出來的, 那時候JavaScript 只能運行在網景(Natscape)的瀏覽器裡.

Netscape 瀏覽器屬於網景通訊公司, 曾經是一家美國的電腦服務公司, 那時候在網際網路市場裡Netscape 市佔率曾高達75%, 卻不敵微軟而被在1998 年以42億美元收購, Internet Explorer (簡稱IE) 開始統領風騷瀏覽器市場, 那時是混亂的年代.

用來規範JavaScript 的標準稱為ECMA-262, 又被稱為 ECMAScript. Ecma 國際(Ecma International) 是一家國際性會員制度的信息和電信標準組織, ECMAScript 給Ecma 進行標準化, 直到現在JavaScript 有9 個版本的規範. 有關所有ECMAScript 版本歷史可以透過 wiki 查看.

而事實上JavaScript 只是其中一種ECMA-262 標準的實作語言而已, 其他TypeScript, CoffeeScript也都同屬此類.

Babel vs Typescript 差異!?

甚麼是Babel ? Babel 是一個JavaScript 轉換器, 主要透過語法轉換器來將ECMAScript 最新版本的程式碼轉換為向後兼容的JavaScript 語法, 以便能夠運作在目前或舊版本的瀏覽器中, 而不用擔心現有瀏覽器環境是否支持.

務必牢記 Babel 不做類型檢查

這跟Typescript 定位的不一樣, Typescript 雖然也能轉換新語法到兼容的JavaScript 語法, 但Typescript 提供的也就恰恰是軟體開發中所最需要的類型語法檢查, interface, class, 泛型(Generic), 變數宣告類型該有的都有. 編譯時期(compile-time) 就可以偵測找出許多低級錯誤, 節省JavaScript 一堆 getXXX 函數, setXXX 函數, 還能預設參數.

總結

JavaScript 語言具有以下特點:

• 它是動態類型語言, 優點是語法簡潔, 具有較高的彈性, 最直接效益就是節省打字的功夫
• Javascript 執行的時候透過V8 (Google 開發的Javascript 引擎)編譯成機器碼，然後由瀏覽器逐行一一加載解釋執行.
• 不支援其它物件導向語言所具有的繼承和重載功能

JavaScript 劣勢或是缺點

• 動態語言不需要型態資訊, 只要打上變數名稱, 傳回型態也無需宣告就能使用, 導致程式碼說明不夠清楚, 語義不清
• 有任何錯誤在執行時期(runtime-time) 才會呈現出來
• 由於沒有型態資訊, 編輯程式碼上的輔助(intellisense)或重構工具通常支援性不夠

Typescript 是JavaScript 的超集, 包含了JavaScript 的所有元素, 並擴展了JavaScript 的語法.

TypeScript 具有以下特點:

• TypeScript 是Microsoft 2014 年發布推出的
• 提供了靜態類型, 物件(Class), 模組(Module), 介面(Interface)
• 提供編譯時型別檢查, 語法檢查
• 它是開源的, 原始碼可以在 Github 獲得

在大型應用程式專案開發中, 一定會有不少工作夥伴一起寫程式, 分別負責不同的功能, 一開始大家都會整理一個共同規範, 欄位變數名稱規則, 物件名稱, 資料夾名稱都會有一定的規則, 但這樣一來雖然降低了管理的困難, 卻也無法提升大家對於每一個人寫的程式內容的理解.

用JavaScript 寫程式容易散漫, 較隨意的寫很多var 變數, 物件與方法, 到最後可能會連自己都忘記是做什麼用的, 最後會變成要不然就是充滿註解, 系統文件也看不懂, 溝通又需要花時間. 所以呢, 快用Typescript 來強制宣告類型, 讓程式碼會說話.

用Typescript 能夠解決以下要點

• 對於容易粗心大意的人, 靜態類型化可以在開發編輯時檢測到語法錯誤
• 有Class, Interface, Private, Protected, Public... 這些關鍵字, 支援物件導向語法, 可以讓程式碼說得更清楚, 消滅註解, 甚至系統文件
• 對泛型的功能支持度很高, 跟C# 的泛型功能超級像, 甚至超過
• 支援條件類型, 更支援函數編程
• 支援跟C# Attribute 一樣強大的裝飾器語法

對了, Typescript 產生出來的 Javascript 檔案, 我們可以貼在瀏覽器中的開發人員工具中的控制台實驗看看之外, 你也能到 JSBin 或是 jsfiddle 這些線上工具進行實驗測試.

結尾

各位, 如果你還沒用過Typescript 或是還在遲疑要選Javascript 或是 Typescript, 別猶豫! 從今天開始改用Typescript 語法來寫程式吧, 寫久了相信你就會跟犀利人妻一樣.

可是瑞凡, 我回不去了!

如果你已經是Typescript 前端開發者, 不要忘記我們有Typescript 與你同行.

最後貼上電影中的名言 ---

為什麼世界需要Typescript (超人)